<template>
  <header class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50 w-full">
    <div class="w-full px-4 sm:px-6">
      <div class="flex items-center justify-between h-16">
        <!-- Logo和导航 -->
        <div class="flex items-center space-x-4 lg:space-x-8">
          <!-- Logo -->
          <div class="flex items-center space-x-2">
            <div class="h-8 w-8 bg-blue-600 rounded flex items-center justify-center">
              <span class="text-white font-bold text-sm">O</span>
            </div>
            <span class="text-xl font-bold text-gray-900 dark:text-white">OpenVlab</span>
          </div>
          
          <!-- 主导航 - 桌面端 -->
          <nav class="hidden lg:flex items-center space-x-4 xl:space-x-6" data-test="main-nav">
            <NuxtLink 
              to="/market" 
              class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >
              市场
            </NuxtLink>
            <NuxtLink 
              to="/quotes" 
              class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >
              行情
            </NuxtLink>
            <NuxtLink 
              to="/volatility" 
              class="text-gray-900 dark:text-white font-medium bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded"
            >
              波动率
            </NuxtLink>
            <NuxtLink 
              to="/anomalies" 
              class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >
              异动
            </NuxtLink>
            <NuxtLink 
              to="/strategy" 
              class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >
              策略
            </NuxtLink>
            <NuxtLink 
              to="/trading" 
              class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >
              交易
            </NuxtLink>
            <NuxtLink 
              to="/teaching" 
              class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >
              教学
            </NuxtLink>
            <NuxtLink 
              to="/community" 
              class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors relative"
            >
              社区
              <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-1 rounded-full">new</span>
            </NuxtLink>
          </nav>
        </div>
        
        <!-- 右侧操作区 -->
        <div class="flex items-center space-x-2 sm:space-x-4">
          <!-- 移动端菜单按钮 -->
          <button 
            @click="toggleMobileMenu"
            class="lg:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
            data-test="mobile-menu-btn"
          >
            <Icon name="menu" class="w-5 h-5 text-gray-600 dark:text-gray-300" />
          </button>
          
          <!-- 功能按钮 - 桌面端 -->
          <div class="hidden lg:flex items-center space-x-4" data-test="desktop-buttons">
            <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
              <Icon name="star" class="w-4 h-4" />
              <span>等待列表</span>
            </button>
            <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
              <Icon name="chat" class="w-4 h-4" />
              <span>联系我们</span>
            </button>
            <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
              <Icon name="user-plus" class="w-4 h-4" />
              <span>邀请好友</span>
            </button>
          </div>
          
          <!-- 用户头像 -->
          <div class="flex items-center space-x-2">
            <div class="w-8 h-8 bg-gray-300 dark:bg-gray-600 rounded-full flex items-center justify-center">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">U</span>
            </div>
          </div>
          
          
          <!-- 刷新按钮 -->
          <button 
            @click="handleRefresh"
            class="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
            :disabled="isRefreshing"
            title="刷新数据"
          >
            <Icon 
              name="refresh-cw" 
              class="w-5 h-5 text-gray-600 dark:text-gray-300 transition-transform duration-300"
              :class="{ 'animate-spin': isRefreshing }"
            />
          </button>
          
          <!-- 更新时间 -->
          <div class="hidden sm:block text-sm text-gray-500 dark:text-gray-400">
            上次:{{ lastUpdateTime }}
          </div>
          
          <!-- 主题切换 -->
          <button 
            @click="toggleTheme"
            class="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
            :title="isDark ? '切换到浅色主题' : '切换到深色主题'"
          >
            <Icon 
              :name="isDark ? 'sun' : 'moon'" 
              class="w-5 h-5 text-gray-600 dark:text-gray-300" 
            />
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端抽屉式导航 -->
    <div 
      v-if="isMobileMenuOpen"
      class="lg:hidden fixed inset-0 z-50 bg-black bg-opacity-50"
      @click="closeMobileMenu"
    >
      <div 
        class="fixed right-0 top-0 h-full w-80 bg-white dark:bg-gray-900 shadow-xl transform transition-transform duration-300 ease-in-out"
        @click.stop
      >
        <!-- 抽屉头部 -->
        <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">导航菜单</h2>
          <button 
            @click="closeMobileMenu"
            class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          >
            <Icon name="x" class="w-5 h-5 text-gray-600 dark:text-gray-300" />
          </button>
        </div>
        
        <!-- 导航链接 -->
        <nav class="p-4 space-y-2">
          <NuxtLink 
            to="/market" 
            class="flex items-center px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            @click="closeMobileMenu"
          >
            市场
          </NuxtLink>
          <NuxtLink 
            to="/quotes" 
            class="flex items-center px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            @click="closeMobileMenu"
          >
            行情
          </NuxtLink>
          <NuxtLink 
            to="/volatility" 
            class="flex items-center px-3 py-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 font-medium"
            @click="closeMobileMenu"
          >
            波动率
          </NuxtLink>
          <NuxtLink 
            to="/anomalies" 
            class="flex items-center px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            @click="closeMobileMenu"
          >
            异动
          </NuxtLink>
          <NuxtLink 
            to="/strategy" 
            class="flex items-center px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            @click="closeMobileMenu"
          >
            策略
          </NuxtLink>
          <NuxtLink 
            to="/trading" 
            class="flex items-center px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            @click="closeMobileMenu"
          >
            交易
          </NuxtLink>
          <NuxtLink 
            to="/teaching" 
            class="flex items-center px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            @click="closeMobileMenu"
          >
            教学
          </NuxtLink>
          <NuxtLink 
            to="/community" 
            class="flex items-center px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            @click="closeMobileMenu"
          >
            社区
            <span class="ml-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">new</span>
          </NuxtLink>
        </nav>
        
        <!-- 功能按钮 -->
        <div class="p-4 border-t border-gray-200 dark:border-gray-700 space-y-2">
          <button class="flex items-center w-full px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <Icon name="star" class="w-4 h-4 mr-3" />
            等待列表
          </button>
          <button class="flex items-center w-full px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <Icon name="chat" class="w-4 h-4 mr-3" />
            联系我们
          </button>
          <button class="flex items-center w-full px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <Icon name="user-plus" class="w-4 h-4 mr-3" />
            邀请好友
          </button>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import Icon from '~/components/ui/Icon.vue'

// 使用主题切换
const { isDark, toggleTheme } = useTheme()

// 格式化时间
const formatTime = (date: Date) => {
  return date.toLocaleTimeString('zh-CN', { 
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 更新时间
const lastUpdateTime = ref(formatTime(new Date()))

// 刷新状态
const isRefreshing = ref(false)

// 移动端菜单状态
const isMobileMenuOpen = ref(false)

// 刷新数据
const handleRefresh = async () => {
  if (isRefreshing.value) return
  
  isRefreshing.value = true
  
  try {
    // 触发全局刷新事件
    const event = new CustomEvent('refresh-market-data')
    window.dispatchEvent(event)
    
    // 更新显示时间
    lastUpdateTime.value = formatTime(new Date())
    
    // 模拟刷新延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
  } catch (error) {
    console.error('刷新失败:', error)
  } finally {
    isRefreshing.value = false
  }
}

// 切换移动端菜单
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

// 关闭移动端菜单
const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

// 模拟实时更新时间
onMounted(() => {
  const interval = setInterval(() => {
    lastUpdateTime.value = formatTime(new Date())
  }, 1000)
  
  onUnmounted(() => {
    clearInterval(interval)
  })
})
</script>
